<style>

</style>

<div class="modal fade" id="createIPSegment" tabindex="-1" role="dialog"
     aria-labelledby="createIPSegmentLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="createIPSegmentLabel">
                    新增
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">IP网段<span class="text-red">*</span></label>
                        <div class="col-sm-10">
                            <div class="input-group" id="create_segment">
                                <input type="number" class="form-control" min="1" max="255" id="segment1" placeholder="必输,范围0-255" oninput="identifySegment(this);">
                                <span class="input-group-addon">.</span>
                                <input type="number" class="form-control" min="0" max="255" id="segment2" placeholder="必输,范围0-255" oninput="identifySegment(this);">
                                <span class="input-group-addon">.</span>
                                <input type="number" class="form-control" min="0" max="255" id="segment3" placeholder="必输,范围0-255" oninput="identifySegment(this);">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_IP_environment" class="col-sm-2 control-label">IP环境<span class="text-red">*</span></label>
                        <div class="col-sm-10">
                            <select class="form-control" id="create_IP_environment" name="create_IP_environment" style="width:100%;">
                                {% for evironment in IP_environment_ %}
                                    <option value="{{ evironment.0 }}">{{ evironment.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_IP_description" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" name="create_IP_description" id="create_IP_description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_IP_invalid" class="col-sm-2 control-label">无效IP地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="create_IP_invalid" id="create_IP_invalid" placeholder="例如：1,254">
                            <span class="help-block">输入1-255之间的数字，用英文逗号分隔，例如：1,254，表示1和254结尾的IP地址为无效地址。</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createIPSegment()">
                    新增
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function identifySegment(ele){
        var value = $(ele).val()
        if(/^0\d$/.test($(ele).val())){$(ele).val('0');}else{$(ele).val(value.replace(/[^0-9]/g,''))}
        if(value>255){$(ele).val(value.slice(0,2))}
    }

    function addErrorMessage(errors) {
        $.each(errors, function(name, value){
            $.each(value, function(i, v){
                $('#create_'+name).after('<span class="help-block">'+v+'</span>')
            })
            $('#create_'+name).parent().parent().addClass('has-error')
        })
    }

    function createIPSegment(){
        var data = {}
        $('.has-error').removeClass('has-error')
        $('.help-block').remove()
        var segment1 = $('#segment1').val()
        var segment2 = $('#segment2').val()
        var segment3 = $('#segment3').val()
        if(!segment1||!segment2||!segment3){
            addErrorMessage({segment:['IP网段请输入完整。']})
            return
        }
        data.segment = segment1+'.'+segment2+'.'+segment3
        data.IP_environment = $('#create_IP_environment').val()
        data.IP_description = $('#create_IP_description').val()
        data.IP_invalid = $('#create_IP_invalid').val()
        $.ajax({
            url: '/api/ipsegment/',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (res) {
                $.confirm({
                    title: 'Tips',
                    type: 'green',
                    content: '新增成功！',
                    buttons: {
                        Ok: function () {
                            window.location.reload()
                        },
                    }
                })
            },
            error: function (res) {
                console.log(res)
                addErrorMessage(res.responseJSON)
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '获取失败！',
                })
            }
        })
    }

</script>